<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { showToast } from 'vant'
import { broadbandOrderApi } from '@/api/order'
import { OrderInfo, OrderListPageParams } from '@/types/order/order'
import OrderItem from '@/views/components/order_item.vue'

const searchForm = reactive({
	clientName: '',
	clientPhone: ''
})

const state = reactive({
	params: {
		page: 1,
		pageNo: 1,
		pageSize: 10,
		take: 10,
		skip: 0,
		...searchForm
	} as OrderListPageParams,
	list: [] as OrderInfo[],
	loading: false,
	finished: false,
	refreshing: false,
	total: 0
})

// 获取订单列表
const getOrderList = async (isRefresh = false) => {
	try {
		state.loading = true
		const res = await broadbandOrderApi(state.params)

		// 下拉刷新，清空数据
		if (isRefresh) {
			state.list = []
		}

		if (res.code === 0 && res.data?.records) {
			state.list.push(...res.data?.records)
			state.total = res.data?.totalCount

			// 判断是否加载完成
			state.finished = state.list.length >= state.total
		} else {
			showToast(res.message || '获取数据失败')
		}
	} catch (error: any) {
		showToast(error.message || '获取数据失败')
	} finally {
		state.loading = false
		state.refreshing = false
	}
}

// 下拉刷新
const onRefresh = () => {
	state.refreshing = true
	state.finished = false
	state.params.pageNo = 1
	state.params.page = 1
	state.params.skip = 0
	getOrderList(true)
}

// 加载更多
const onLoad = () => {
	if (!state.finished) {
		state.params.page++
		state.params.pageNo++
		state.params.skip = (state.params.page - 1) * state.params.pageSize
		getOrderList()
	}
}

// 搜索
const onSearch = () => {
	state.params.pageNo = 1
	state.params.page = 1
	state.params.skip = 0
	state.finished = false
	state.list = []
	getOrderList()
}

// 重置搜索
const onReset = () => {
	searchForm.clientName = ''
	searchForm.clientPhone = ''
	onSearch()
}

onMounted(() => {
	getOrderList()
})
</script>

<template>
	<div class="home-container">
		<div class="search-bar">
			<div class="search-content">
				<div class="search-form">
					<div class="search-input-wrapper">
						<van-search
							v-model="searchForm.clientName"
							placeholder="搜索姓名/手机号"
							shape="round"
							background="transparent"
							class="custom-search"
							clearable
							@search="onSearch"
						>
							<template #right-icon>
								<van-button 
									type="primary" 
									size="small" 
									round
									class="search-btn"
									:loading="state.loading"
									@click="onSearch"
								>
									搜索
								</van-button>
							</template>
						</van-search>
					</div>
				</div>
			</div>
		</div>

		<div class="content-wrapper">
			<van-pull-refresh v-model="state.refreshing" @refresh="onRefresh">
				<van-list
					v-model:loading="state.loading"
					:finished="state.finished"
					finished-text="没有更多了"
					@load="onLoad"
				>
					<div class="order-list">
						<OrderItem v-for="item in state.list" :key="item.id" :order="item" />
					</div>
				</van-list>
			</van-pull-refresh>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.home-container {
	min-height: 100vh;
	background: #f5f5f5;
	padding-top: 56px; // 减小顶部间距

	@media (max-width: 767px) {
		padding-top: 56px; // 保持一致的顶部间距
	}
}

.search-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
	
	.search-content {
		width: 50%;
		margin: 0 auto;
		padding: 8px;

		@media (width <= 1000px) {
			width: 100%;
		}
	}

	.search-form {
		.search-input-wrapper {
			:deep(.custom-search) {
				padding: 0;
				background: transparent;

				.van-search__content {
					background: #f5f5f5;
					transition: background-color 0.3s;

					&:hover {
						background: #f0f0f0;
					}
				}

				.van-field__left-icon {
					color: #666;
				}

				.van-field__right-icon {
					padding: 0;
				}

				.van-search__action {
					padding: 0;
					margin: 0;
				}
			}

			.search-btn {
				height: 32px;
				margin-right: 10px;
				padding: 0 16px;
				font-size: 13px;
			}
		}
	}
}

.content-wrapper {
	width: 50%;
	margin: 0 auto;
	padding: 16px;

	@media (max-width: 767px) {
		padding: 12px;
	}
	
	@media (min-width: 768px) {
		padding: 24px 32px;
	}
	
	@media (width <= 1000px) {
		width: 100%;
	}
}

// 暗黑模式适配
:root[data-theme='dark'] {
	.search-bar {
		background: #2c2c2c;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);

		.search-form {
			.search-input-wrapper {
				:deep(.custom-search) {
					.van-search__content {
						background: #363636;

						&:hover {
							background: #404040;
						}
					}
				}
			}
		}
	}
}
</style>
